<template >
    <div class="workcounttable_top">
        <div class="block" float="left">
            <el-button type="primary" @click="btna('a')">月份</el-button>
            <el-button type="primary" @click="btna('b')">日期</el-button>
            &nbsp;&nbsp;
            <!-- 月份日期选择器 -->
            <!-- format="M月" -->
            <el-date-picker v-model="valueTime" v-if="isnoneA" type="month" size="small" format="M月" value-format="M"
                placeholder="月份" />
            <!-- 日期选择器 -->
            <el-date-picker v-model="valueTime" v-else="isnoneB" type="daterange" start-placeholder="开始日期"
                end-placeholder="结束日期" size="small" :default-value="[new Date(), new Date()]" />
            <el-button type="primary" @click="datatime()">查询</el-button>
        </div>
        <!-- table -->
        <div class="bottom">
            <el-table :data="newtable" border style="width: 100%" height="500" highlight-current-row="true" stripe
                :row-style="{ backgroundColor: '#FFFFFF' }"
                :header-cell-style="{ background: '#1EC695', color: '#ffffff' }">
                <el-table-column label="序号" width="100" align="center">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="功能" align="center">
                    <template #default="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="发布数量" align="center">
                    <template #default="scope">
                        {{ scope.row.num }}
                    </template>
                </el-table-column>
                <el-table-column prop="city" label="占比" align="center">
                    <template #default="scope">
                        {{ scope.row.log }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import service from '@/api'
let newtable = ref()
// 日期选择器切换逻辑
let isnoneA = ref(true)
let isnoneB = ref(false)
const valueTime = ref()
const btna = (num: any) => {
    if (num == 'a') {
        isnoneA.value = true
    } else if (num == 'b') {
        isnoneB.value = true
        isnoneA.value = false
    }
}
// 获取了月份number
let num5: number
const datatime = async () => {
    num5 = valueTime.value
    let res1 = await service.xss.messageStatistics_msgNum({ year: 2023, month: 2 })

    // 健名和键值我都要
    newtable.value = res1.data.data

    // 所有条数
    let baifenbi = newtable.value.reduce((prev: any, item: any) => prev += Number(item.num), 0)
    // 符合条件条数
    let fil = newtable.value.map((item: any, index: any) => newtable.value[index].log = (item.num / baifenbi * 100).toFixed(2) + '%')

}

//要不要传num呢 

onMounted(async () => {
    // 消息统计相关接口（）
    let res1 = await service.xss.messageStatistics_msgNum({ year: 2023, month: 2 })

    // 健名和键值我都要
    newtable.value = res1.data.data

    // 所有条数
    let baifenbi = newtable.value.reduce((prev: any, item: any) => prev += Number(item.num), 0)
    // 符合条件条数
    let fil = newtable.value.map((item: any, index: any) => newtable.value[index].log = (item.num / baifenbi * 100).toFixed(2) + '%')

})
</script>
  
<style scoped>
.block {
    padding-left: 40px;
}

.workcounttable_top {
    padding: 30px;
    color: #312E28;
    background-color: white;
    overflow: hidden;
    margin-bottom: 20px;
}

.input {
    width: 200px;
}

/* .success-row {
  background-color:#eaf3fb !important; 
} */
/* .el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
        background-color: rgb(247, 247, 247); 隔行变色
    } */
/* 强制修改样式 */
.bottom2 {
    float: right;
}

.el-input__wrapper {
    float: right;
}

.btn-seal {
    color: white;
    background-color: rgb(23, 144, 255);
}

.workcounttable {
    padding: 30px;
    background-color: rgb(247, 247, 247);
}

.top {
    float: right;
    background-color: white;
    padding: 10px 0 10px 40px;
    margin-top: 20px;
}

.bottom {
    background-color: white;
    padding: 10px 40px;
}

/* 日期选择器 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 30px;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>